<template>
  <div id="app">
      <div style="flex: 1; overflow: auto; padding: 10px;">
      <div style="display: flex; justify-content: space-between">
        <h4>{{ title }}</h4>
        <!-- <span @click="goToPage('kaoqinshenpi_index')" style="font-size:12px;color:#666666">更多&nbsp;&nbsp;&gt;</span> -->
      </div>

      <div class="container">
        <div
          class="item"
          v-for="(item, index) in items"
          :key="index"
          @click="goToPage('kaoqinshenpi_index')"
        >
          <div class="item-line itemLine1">{{ item.line1 }}</div>
          <div
            class="item-line"
            style="width: 100%; display: flex; justify-content: center"
          >
            <span class="itemLine2">{{ item.line2 }}</span>
            <span style="margin-left: 6px">></span>
          </div>
          <!-- 如果不是最后一项，添加分隔线 -->
          <div v-if="index < items.length - 1" class="divider"></div>
        </div>
      </div>

      <div>
        <h4>我的项目</h4>
        <div class="container">
          <!-- 上部分 -->
          <div style="position: relative; overflow: hidden">
            <div
              class="tab"
              :class="{ active: selectedTab === 'mine' }"
              @click="selectTab('mine')"
            >
              <span style="font-size:14px;">我负责的</span>
              <span :class="{ 'tab-indicator': selectedTab === 'mine' }"></span>
            </div>
            <!-- <div
              class="tab"
              :class="{ active: selectedTab === 'joined' }"
              @click="selectTab('joined')"
            >
              <span style="font-size:14px;">我参与的</span>
              <span
                :class="{ 'tab-indicator': selectedTab === 'joined' }"
              ></span>
            </div> -->
            <!-- 底部的长方形条 -->
            <!-- <div
              class="tab-indicator"
              :style="{ left: tabIndicatorPosition + 'px' }"
            ></div> -->
          </div>
            <div class="footer-separator"></div>

          <!-- 中间部分 -->
          <div class="middle">
            <div v-for="item in dataTypeList" 
              :key="item.value" 
              :style="{
                'flex': '1',
                'text-align': 'center',
                'padding': '6px 6px',
                'margin': '0 2px',
                'cursor': 'pointer',
                'background-color': '#f8f6f6',
                'font-size': '14px',
                'border-radius': '5px',
                'color': curType === item.value ? '#739F2F' : '#666666',
                position: 'relative'
              }"
              @click="curType = item.value"
            >
              {{ item.label }}
            </div>
          </div>
          <div v-for="(item, index) in dataShow" :key="index" >
            <itemCard :item="item" :typeInfo="item.type" @ok="goToPageXMJD('xiangmujindu', index)">
              
            </itemCard>
          </div>
        </div>
      </div>
    </div>

    <!-- 区域3 -->
    <div class="bottom-section">
      <div class="button">
        <img src="@/assets/xiangmujindu/tab_home_select.png" alt="首页" />
        <span>首页</span>
      </div>
      <div class="button" @click="goToPage('my')">
        <img src="@/assets/xiangmujindu/tab_my_unselected.png" alt="我的" />
        <span>我的</span>
      </div>
    </div>
  </div>
</template>
 
<script>
import itemCard from './itemCard.vue'
export default {
  components: {
    itemCard
  },
  data() {
    return {
      title: "我的待办",
      message: "菜鸟教程",
      url: "www.runoob.com",
      alexa: "10000",
      curType: '',
      items: [
        {
          line1: "考勤审批",
          line2: "2024/09/12-阳泉D4模组H800集群布线集成服务",
        },
        {
          line1: "考勤审批",
          line2: "2024/09/13-阳泉D4模组H800集群布线集成服务",
        },
        {
          line1: "考勤审批",
          line2: "2024/09/14-阳泉D4模组H800集群布线集成服务",
        },
      ],
      selectedTab: "mine", // 默认选中的上部分tab
      selectedTabMiddle: 1, // 默认选中的中间部分tab
      dataTypeList: [
        {
          label: '全部',
          value: ''
        },
        {
          label: '筹备中',
          value: 'choubeizhong'
        },
        {
          label: '实施中',
          value: 'shishizhong'
        },
        {
          label: '已完成',
          value: 'yiwancheng'
        },
      ],
      tabs: ["全部", "筹备中", "实施中", "已完成"],
      dataList: [
        {
          category: '布线',
          title: '项目编号: 7012193',
          subTitle: '项目名称: 阳泉D4模组H800集群布线集成服务',
          jihuashijian: '计划时间: 2024-0-18 至 2024-09-30',
          jifangbianhao: '机房编号: NA63',
          jifangdizhi: '机房地址: 北京市海淀区玉泉慧谷2期',
          zhenghaogongsi: '整包公司: 广州锦帏信息网络工程技术有限公司',
          gongzuoneirong: '工作内容: 服务器综合布线',
          type: {
            label: '筹备中',
            value: 'choubeizhong',
            idx : 1
          },
        },
        {
          category: '交付',
          title: '项目编号: 709762',
          subTitle: '科石-自服务交付2024年12月需求',
          jihuashijian: '计划时间: 2024-12-01至2024-12-10',
          jifangbianhao: '机房编码:  HBHLJD',
          jifangdizhi: '机房地址: 河北省张家口市怀来县秦淮数据总部基地',
          zhenghaogongsi: '整包公司: 广州锦帏信息网络工程技术有限公司',
          gongzuoneirong: '工作内容: 服务器综合布线',
          type: {
            label: '筹备中',
            value: 'choubeizhong',
            idx : 1
          },
        },
        {
          category: '改配',
          title: '项目编号: 709762',
          subTitle: '灵石--山东潍坊-节点裁撤',
          jihuashijian: '计划时间: 2024-11-15 至 2024-11-25',
          jifangbianhao: '机房编码: JSTCHJ',
          jifangdizhi: '机房地址: 江苏省苏州市太仓市璜泾镇鹿河蒋家浜路9号',
          zhenghaogongsi: '整包公司: 广州锦帏信息网络工程技术有限公司',
          gongzuoneirong: '工作内容: 服务器综合布线',
          type: {
            label: '实施中',
            value: 'shishizhong',
            idx : 2
          },
        },
        {
          category: '网络',
          title: '项目编号:779652',
          subTitle: '凌石-自交付&搬迁项目2024年12月',
          jihuashijian: '计划时间: 2024-12-15 至 2024-12-30',
          jifangbianhao: '机房编号: SHPDLZ',
          jifangdizhi: '机房地址: 上海市-浦东新区-丽正路1512号',
          zhenghaogongsi: '整包公司: 广州锦帏信息网络工程技术有限公司',
          gongzuoneirong: '工作内容: 服务器综合布线',
          type: {
            label: '已完成',
            value: 'yiwancheng',
            idx : 3
          },
        }
      ]
    };
  },
  computed: {
    dataShow () {
      if (!this.curType) return this.dataList
      return this.dataList.filter(item => item.type.value === this.curType)
    }
  },
  methods: {
    dispatchWork() {},
    closeOrder() {},
    goToPage(page) {
      this.$router.push({ name: page })
    },
    goToPageXMJD(page, i) {
      sessionStorage.setItem('name', this.tabs[this.dataList[i].type.idx])
      // 记录tab状态
      sessionStorage.setItem('selType', this.curType)
      this.$router.push({ name: page, query: this.dataList[i] })
    },
    selectTab(tab) {
      this.selectedTab = tab;
      // 更新tab指示器的位置
      this.updateTabIndicatorPosition();
    },
    selectTabMiddle(index) {
      this.selectedTabMiddle = index;
    },
    updateTabIndicatorPosition() {
      // 假设.tab的宽度是固定的，这里我们设置为200px作为示例
      // 你可以根据实际情况调整这个值或者通过JavaScript动态获取
      const tabWidth = 130;
      // 由于我们有两个tab，所以我们需要判断当前选中的是哪个tab，并计算其位置
      this.tabIndicatorPosition = this.selectedTab === "mine" ? 0 : tabWidth;
    },
  },
  mounted() {
    // 在组件挂载后更新tab指示器的位置
    this.updateTabIndicatorPosition();
    const type = sessionStorage.getItem('selType')
    if (type) {
      console.log(type)
      this.curType = type
    }
    sessionStorage.setItem('selType', '')
  },
};
</script>
 
<style scoped>
#app {
  width: 100%;
  height: 100%;
  /* display: block; */
  display: flex;
  flex-direction: column;
  background: linear-gradient(to right, #FFFFFF, #E9EFFD);
  background-size: 100% 43%;
  background-repeat: no-repeat;
  overflow: hidden;
}

template {
  display: block;
  width: 1028px;
  height: 1980px;
  background: rgb(195, 141, 41);
}

.container {
  width: 100%;
  margin: 20px 0px;
  /* height: 100%; */
  background-color: white;
  border-radius: 10px; /* 四个角有弧度 */
  padding: 1px 0px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 可选的阴影效果 */
  font-size: 13px;
}

.item {
  padding: 4px 6px;
  font-size: 16px;
}

.item-line {
  margin: 5px 0; /* 每行之间有一定间距 */
}
.itemLine1 {
  width: fit-content;
  color: #fff;
  padding: 2px 6px;
  background-color: #98c355;
  border-radius: 4px;
  font-size: 13px;
}
.itemLine2 {
  display: inline-block;
  width: 94%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
}

.divider {
  height: 1px;
  background-color: #F4F5F9; /* 深灰色分隔线 */
  margin: 10px 0; /* 分隔线上下的间距 */
}

.header {
  display: flex;
  justify-content: space-between;
  padding: 16px;
  background-color: #fefefe;
  border-radius: 16px 16px 0 0;
}

.tab {
  cursor: pointer;
  padding: 8px 16px;
  /* color: #76983a; */
  font-size: 16px;
  position: relative; /* 为了z-index，确保指示器在tab上方 */
  z-index: 1;
  float: left;
}

.tab.active {
  color: #76983a;
  /* background-color: #76983a; */
}

.tab-indicator {
  position: absolute;
  left: 30%;
  bottom: 0px;
  height: 2px;
  width: 30px; /* 与.tab的宽度相同 */
  background-color: #76983a;
  transition: left 0.3s ease; /* 添加过渡效果 */
}
.middle {
  display: flex;
  justify-content: space-around;
  padding: 2px;
  background-color: #fefefe;
  border-radius: 5px 5px;
  overflow: hidden;
  margin: 16px 12px;
}



.tab-item.active {
  color: #76983a;
  background-color: #f1f7e8;
}


/* 区域3 */
.bottom-section {
  /* position: fixed;
  bottom: 0;
  left: 0; */
  width: 100%;
  height: 60px;
  background-color: #ffffff;
  display: flex;
  /* z-index: 1000; */
  border-top: 1px solid #e0e0e0;
}
.button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.button img {
  width: 30px;
  height: 30px;
  margin-bottom: 5px;
}
.button span {
  font-size: 13px;
  color: #333333;
}
</style>